<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">

        <p></p>

    </div>

    <script>

        // DOM的增删改查
        //    innerHTML  字符串

        //    className   classList   



        // DOM的新增
        //    1 创建一个标签   document.createElement(标签的名字) 
        //    2 可以给标签添加内容和属性   innerText / innerText  / value
        //    3 插入到指定的位置
        //        appendChild()
        //        insertBefore(新的 ， 旧的)

        //   注意:创建一个标签只能插入一次




        // 1 创建一个标签  createElement  创建一个标签
        var oDiv = document.createElement('div');
        console.log(oDiv);
        // 2 给标签添加内容  innerHTML / innerText
        console.log(oDiv.innerHTML);
        oDiv.innerHTML = '777';
        console.log(oDiv.innerHTML);
        // 3 给标签添加属性
        oDiv.className = 'a';


        // 4 把标签插入到指定的位置  (在父元素中插入子元素，插入在后面的)
        // document.body.appendChild(oDiv);

        //  注意：每创建一个元素，只能插入一次
        var oBox = document.querySelector('.box');
        // oBox.appendChild(oDiv);

        var oP = document.querySelector('p');
        // 在指定的元素前面插入 (新的 , 旧的)
        oBox.insertBefore(oDiv, oP);

    </script>

</body>

</html>